import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'


import { Layout, Menu } from 'antd';


import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';

const { Sider } = Layout;

import { getPermission } from '../../../request/api'

export default function Sidebar(props) {
    const navigate = useNavigate()
    useEffect(() => {
        getpermission()
    }, [])
    const { collapsed } = props

    // 获取权限数据
    let [data, setdata] = useState([])
    const getpermission = async () => {
        let res = await getPermission({})
        setdata(res.info_list[0].children)
    }


    const siderStyle: React.CSSProperties = {
        textAlign: 'center',
        height: 'calc(100vh - 1.2rem)',
        lineHeight: '2rem',
        color: '#000',
        backgroundColor: '#fff',
        marginRight: 10,
        position: 'fixed',
        top: 70,
        overflow: 'scroll'
    };


    const items2 = data.map((item, index) => {
        if (!item.children) {
            return 
        } else {
            return {
                key: item._id,
                label: item.Permissions_name,
                children: item.children.map((item2, index2) => {
                    return {
                        key: item2._id,
                        label: <span style={{ width: '100%', textAlign: 'left' }} onClick={() => {
                            navigate(item2.Permissions_url)
                        }}>{item2.Permissions_name}</span>,
                    }
                })
            };
        }
    })

    return (
        <div>
            <Sider className='left' width='14%' style={siderStyle} trigger={null} collapsible collapsed={collapsed}>
                <Menu
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    defaultOpenKeys={['sub1']}
                    style={{ height: '100%', borderRight: 0 }}
                    items={items2}
                />
            </Sider>
        </div>
    )
}
